<template>
	<!-- 页面头部导航 -->
	<view class="top-container">
		<view class="white-top-header">
			<view class="white-top-logo">
				<image id="logo" src="@/static/imgs/qm-logo-green.png" mode="aspectFit" ></image>
			</view>
			<view class="white-top-navbar">
				<view :class="[showWhat=='index'?'active-navbar':'']" @click="goWhat('index')">首页</view>
				<view :class="[showWhat=='quku'?'active-navbar':'']" @click="goWhat('quku')">乐器</view>
				<view :class="[showWhat=='songlist'?'active-navbar':'']" @click="goWhat('songlist')">歌单</view>
				<view :class="[showWhat=='artist'?'active-navbar':'']" @click="goWhat('artist')">音乐人</view>
				<view :class="[showWhat=='mymusic'?'active-navbar':'']" @click="goWhat('mymusic')">我的音乐</view>
			</view>
			<view class="white-top-search">
				<uni-search-bar class="top-search" placeholder="请输入歌曲名...." cancelButton="none" />
			</view>
			<view v-if="!login_username" class="white-top-user text-md" :class="[showWhat=='user'?'active-navbar':'']" @click="goWhat('user')">登录/注册</view>
			<view v-else class="white-top-user text-md"  @click="goWhat('user')">欢迎您,{{login_username}}</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState
	export default {
		name:"my-topMenu",
		props:{
			showWhat:String
		},
		data() {
			return {
				
			};
		},
		computed:{
			...mapState({
				hasLogin: (state) => state.user.hasLogin,
				login_username: (state) => state.user.username
			}),
		},
		methods:{
			goWhat(e){
				this.$emit('goWhat',e)
				// e=='index' ? this.$router.push("/"):this.$router.push("?"+e)
				
			},
		}
	}
</script>

<style>

</style>
